<DocMatDialog></DocMatDialog>
<DocMatDialogTitle Secondary="true"></DocMatDialogTitle>
<DocMatDialogContent Secondary="true"></DocMatDialogContent>
<DocMatDialogActions Secondary="true"></DocMatDialogActions>

<h5 class="mat-h5">Example</h5>

<style>
    .demo-mat-dialog-container li { padding: 5px; }   
</style>

<DemoContainer Class="demo-mat-dialog-container">
    <Content>
        <ol>
            <li>
                <MatTextField Label="What's your name?" @bind-Value="@name"></MatTextField>
            </li>
            <li>
                <MatButton OnClick="@OpenDialog" Raised="true">Pick one</MatButton>
            </li>
            @if (animal != null)
            {
                <li>You chose: @animal</li>
            }
        </ol>
        <MatDialog @bind-IsOpen="@dialogIsOpen">
            <MatDialogTitle>Hi @name</MatDialogTitle>
            <MatDialogContent>
                <p>What's your favorite animal?</p>
                <MatTextField @bind-Value="@dialogAnimal"></MatTextField>                
            </MatDialogContent>
            <MatDialogActions>
                <MatButton OnClick="@(e => { dialogIsOpen = false; })">No Thanks</MatButton>
                <MatButton OnClick="@OkClick">OK</MatButton>
            </MatDialogActions>
        </MatDialog>

        @code
        {
            bool dialogIsOpen = false;
            string name = null;
            string animal = null;
            string dialogAnimal = null;

            void OpenDialog()
            {
                dialogAnimal = null;
                dialogIsOpen = true;
            }

            void OkClick()
            {
                animal = dialogAnimal;
                dialogIsOpen = false;
            }

        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <ol>
            <li>
                <MatTextField Label=""What's your name?"" @bind-Value=""@name""></MatTextField>
            </li>
            <li>
                <MatButton OnClick=""@OpenDialog"" Raised=""true"">Pick one</MatButton>
            </li>
            @if (animal != null)
            {
                <li>You chose: @animal</li>
            }
        </ol>
        <MatDialog @bind-IsOpen=""@dialogIsOpen"">
            <MatDialogTitle>Hi @name</MatDialogTitle>
            <MatDialogContent>
                <p>What's your favorite animal?</p>
                <MatTextField @bind-Value=""@dialogAnimal""></MatTextField>                
            </MatDialogContent>
            <MatDialogActions>
                <MatButton OnClick=""@(e => { dialogIsOpen = false; })"">No Thanks</MatButton>
                <MatButton OnClick=""@OkClick"">OK</MatButton>
            </MatDialogActions>
        </MatDialog>

        @code
        {
            bool dialogIsOpen = false;
            string name = null;
            string animal = null;
            string dialogAnimal = null;

            void OpenDialog()
            {
                dialogAnimal = null;
                dialogIsOpen = true;
            }

            void OkClick()
            {
                animal = dialogAnimal;
                dialogIsOpen = false;
            }

        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>